<template>
    <div class="min-h-screen bg-gray-100">
      <Navbar />
      
      <main class="container mx-auto px-4 py-8">
        <div class="text-center mb-12">
          <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">选择适合您的方案</h1>
          <p class="text-gray-600 mt-4 max-w-2xl mx-auto">灵活的定价方案，满足不同规模用户的需求</p>
          
          <div class="flex items-center justify-center mt-8">
            <span class="text-gray-600">按月计费</span>
            <div class="mx-4 relative inline-block w-12 h-6">
              <input type="checkbox" id="billing-toggle" class="sr-only peer" v-model="isAnnualBilling">
              <div class="w-12 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
            </div>
            <span class="text-gray-600">按年计费 <span class="text-primary font-medium">省20%</span></span>
          </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          <!-- 免费方案 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg border border-gray-200">
            <div class="p-8">
              <h3 class="text-xl font-bold text-gray-900">免费版</h3>
              <div class="mt-4 flex items-end">
                <span class="text-4xl font-bold text-gray-900">¥0</span>
                <span class="text-gray-500 ml-2">/月</span>
              </div>
              <p class="mt-4 text-gray-600">适合个人用户体验AI功能</p>
              
              <ul class="mt-6 space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">每月1000次调用</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">基础模型访问</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">社区支持</span>
                </li>
                <li class="flex items-start text-gray-400">
                  <i class="fa fa-times mt-1 mr-3"></i>
                  <span>API访问</span>
                </li>
                <li class="flex items-start text-gray-400">
                  <i class="fa fa-times mt-1 mr-3"></i>
                  <span>自定义模型</span>
                </li>
                <li class="flex items-start text-gray-400">
                  <i class="fa fa-times mt-1 mr-3"></i>
                  <span>优先支持</span>
                </li>
              </ul>
              
              <button class="mt-8 w-full py-3 px-4 border border-primary text-primary font-medium rounded-lg hover:bg-primary/5 transition-colors">
                开始免费使用
              </button>
            </div>
          </div>
          
          <!-- 专业方案 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl border-2 border-primary transform scale-105 relative z-10">
            <div class="absolute top-0 right-0 bg-primary text-white px-4 py-1 text-sm font-medium">
              最受欢迎
            </div>
            <div class="p-8">
              <h3 class="text-xl font-bold text-gray-900">专业版</h3>
              <div class="mt-4 flex items-end">
                <span class="text-4xl font-bold text-gray-900">¥99</span>
                <span class="text-gray-500 ml-2">/月</span>
              </div>
              <p class="mt-4 text-gray-600">适合小型团队和开发者</p>
              
              <ul class="mt-6 space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">每月100,000次调用</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">所有模型访问</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">电子邮件支持</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">API访问</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">基础数据分析</span>
                </li>
                <li class="flex items-start text-gray-400">
                  <i class="fa fa-times mt-1 mr-3"></i>
                  <span>自定义模型</span>
                </li>
              </ul>
              
              <button class="mt-8 w-full py-3 px-4 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
                选择专业版
              </button>
            </div>
          </div>
          
          <!-- 企业方案 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg border border-gray-200">
            <div class="p-8">
              <h3 class="text-xl font-bold text-gray-900">企业版</h3>
              <div class="mt-4 flex items-end">
                <span class="text-4xl font-bold text-gray-900">¥299</span>
                <span class="text-gray-500 ml-2">/月</span>
              </div>
              <p class="mt-4 text-gray-600">适合企业级应用和团队</p>
              
              <ul class="mt-6 space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">每月1,000,000次调用</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">所有模型访问</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">24/7专属支持</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">API访问</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">高级数据分析</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                  <span class="text-gray-600">自定义模型</span>
                </li>
              </ul>
              
              <button class="mt-8 w-full py-3 px-4 border border-primary text-primary font-medium rounded-lg hover:bg-primary/5 transition-colors">
                联系销售
              </button>
            </div>
          </div>
        </div>
        
        <div class="mt-16 bg-white rounded-xl shadow-md p-8 max-w-4xl mx-auto">
          <h2 class="text-2xl font-bold text-gray-900 text-center mb-8">常见问题</h2>
          
          <div class="space-y-6">
            <div>
              <button class="flex justify-between items-center w-full text-left focus:outline-none" @click="toggleFaq(1)">
                <span class="text-lg font-medium text-gray-900">如何选择适合我的方案？</span>
                <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300" :class="{'transform rotate-180': faqOpen[1]}"></i>
              </button>
              <div class="mt-3 text-gray-600" v-show="faqOpen[1]">
                <p>我们提供三种方案以满足不同用户的需求：免费版适合个人用户体验AI功能；专业版适合小型团队和开发者，提供更多的API调用次数和高级功能；企业版适合企业级应用，提供更高的调用限额、专属支持和自定义模型等高级功能。</p>
                <p class="mt-2">如果你不确定选择哪种方案，可以先试用免费版，或联系我们的销售团队获取个性化建议。</p>
              </div>
            </div>
            
            <div>
              <button class="flex justify-between items-center w-full text-left focus:outline-none" @click="toggleFaq(2)">
                <span class="text-lg font-medium text-gray-900">什么是API调用次数？</span>
                <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300" :class="{'transform rotate-180': faqOpen[2]}"></i>
              </button>
              <div class="mt-3 text-gray-600" v-show="faqOpen[2]">
                <p>API调用次数是指您的应用程序或服务通过我们的API向AI模型发送请求的次数。每次请求都会消耗一个调用次数。不同的方案提供不同的月度调用限额，超出限额后将无法继续调用，直到下个月重置或升级您的方案。</p>
              </div>
            </div>
            
            <div>
              <button class="flex justify-between items-center w-full text-left focus:outline-none" @click="toggleFaq(3)">
                <span class="text-lg font-medium text-gray-900">如何升级或降级我的方案？</span>
                <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300" :class="{'transform rotate-180': faqOpen[3]}"></i>
              </button>
              <div class="mt-3 text-gray-600" v-show="faqOpen[3]">
                <p>您可以随时在账户设置中升级或降级您的方案。升级将立即生效，并按比例计算剩余时间的费用；降级将在下一个计费周期生效。</p>
              </div>
            </div>
            
            <div>
              <button class="flex justify-between items-center w-full text-left focus:outline-none" @click="toggleFaq(4)">
                <span class="text-lg font-medium text-gray-900">企业版可以定制模型吗？</span>
                <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300" :class="{'transform rotate-180': faqOpen[4]}"></i>
              </button>
              <div class="mt-3 text-gray-600" v-show="faqOpen[4]">
                <p>是的，企业版用户可以定制专属模型。我们的专业团队将根据您的需求和数据，为您训练和优化特定领域的AI模型，以提供更精准的结果和更好的性能。</p>
              </div>
            </div>
          </div>
        </div>
      </main>
      
      <Footer />
    </div>
  </template>
  
  <script>
  import Navbar from '../components/Navbar.vue'
  import Footer from '../components/Footer.vue'
  
  export default {
    name: 'PricingView',
    components: {
      Navbar,
      Footer
    },
    data() {
      return {
        isAnnualBilling: false,
        faqOpen: {
          1: false,
          2: false,
          3: false,
          4: false
        }
      }
    },
    methods: {
      toggleFaq(id) {
        this.faqOpen[id] = !this.faqOpen[id]
      }
    }
  }
  </script>
  
  <style scoped>
  /* 自定义样式可以在这里添加 */
  </style>
      